<%-- 
    Document   : register
    Created on : Jul 24, 2013, 5:15:49 PM
    Author     : dienvm60347
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="./javascript/validateRegis.js" ></script>
        <title>Register Page</title>
    </head>
    <body>
        <div style="margin: auto; width: 990px;">
            <div class="header">
                <c:import url="header.jsp"/>
            </div>
            <div class="content">
                <div class="content_left">
                    <c:choose>
                        <c:when test="${not empty USERNAME}">
                            <c:import url="login-success.jsp">
                                <c:param name="user" value="${USERNAME}"/>
                            </c:import>
                        </c:when>
                        <c:otherwise>
                            <c:import url="loginBox.jsp"/>
                        </c:otherwise>
                    </c:choose>
                </div>
                <div class="content_right">
                    <div class="title">
                        <div class="title_left">
                            Trang đăng ký
                        </div>
                    </div>
                    <div class="sub_content">
                        <c:choose>
                            <c:when test="${not empty param.result}">
                                <span style="font-size: 20px; text-align: center">Bạn đã đăng ký thành công, nhấn vào
                                <a href="homepage.jsp"> đây </a>để trở lại trang chủ.</span>
                            </c:when>
                            <c:otherwise>
                                <c:if test="${not empty LIST}">
                                    <c:forEach var="AccountDTO" items="${LIST}" varStatus="counter">
                                        <script>
                                            listuser[${counter.count}-1]='${AccountDTO.username}';
                                            listemail[${counter.count}-1]='${AccountDTO.email}';
                                        </script>
                                    </c:forEach>
                                </c:if>
                                <form action="ControllerServlet" method="POST" onsubmit="return disableSubmit()">
                                    <table border="0">
                                        <thead>
                                            <tr>
                                                <th colspan="3" style="color: #1444b0; padding-bottom: 40px; font-size: 25px;">Vui lòng nhập đầy đủ thông tin phía dưới để đăng ký</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td style="width: 160px; font-weight: bold">
                                                    Họ tên:
                                                </td>
                                                <td>
                                                    <div style="color: red;">
                                                        <span id="errorMinLeng" style="display: none">Vui lòng nhập họ tên</span>
                                                        <span id="errorMaxLeng" style="display: none">Họ tên quá dài</span>
                                                    </div>
                                                    <input class="txtBox" style="width: 200px" type="text" name="txtFull" value=""
                                                           onblur="validFullName(this.value, 'errorMinLeng', 'errorMaxLeng')"/>
                                                    
                                                </td>
                                            </tr>

                                            <tr>
                                                <td style="width: 160px; font-weight: bold">
                                                    Tên đăng nhập (User):
                                                </td>

                                                <td>
                                                    <div style="color: red;">
                                                        <span id="errorLeng" style="display: none">Tên đăng nhập phải từ 4 đến 15 ký tự</span>
                                                        <span id="specialChar" style="display: none">Tên đăng nhập không chứa ký tự đặc biệt</span>
                                                        <span id="errorExisted" style="display: none">Tên đăng nhập này đã có người sử dụng</span>
                                                    </div>
                                                    <input class="txtBox" style="width: 200px" type="text"
                                                           name="txtUser" value=""
                                                           onblur="validUser(this.value, 'errorLeng','specialChar','errorExisted')" />
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="width: 160px; font-weight: bold">
                                                    Mật khẩu:
                                                </td>
                                                <td>
                                                    <div style="color: red;">
                                                        <span id="errorLengPass" style="display: none">Mật khẩu phải từ 4 đến 30 ký tự</span>
                                                    </div>
                                                    <input id="pass" class="txtBox" type="password" name="txtPass" value=""
                                                           onblur="validPass(this.value, 'errorLengPass')"/>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="width: 160px; font-weight: bold">
                                                    Xác nhận mật khẩu:
                                                </td>
                                                <td>
                                                    <div style="color: red;">
                                                        <span id="errorConfirmPass" style="display: none">Mật khẩu xác nhận không trùng khớp</span>
                                                    </div>
                                                    <input class="txtBox" type="password" name="txtPassCheck" value="" 
                                                           onblur="if(this.value==document.getElementById('pass').value){
                                                               offDisplay('errorConfirmPass');
                                                               errorconfirmpass=false;}
                                                               else onDisplay('errorConfirmPass');"/>
                                                </td>
                                                
                                            </tr>
                                            <tr>
                                                <td style="width: 160px; font-weight: bold">
                                                    Email:
                                                </td>
                                                <td>
                                                    <div style="color: red;">
                                                        <span id="errorMinLengEmail" style="display: none">Vui lòng nhập địa chỉ email</span>
                                                        <span id="errorMaxLengEmail" style="display: none">Địa chỉ email không đúng</span>
                                                        <span id="errorExistedEmail" style="display: none">Địa chỉ email đã có người sử dụng</span>
                                                    </div>
                                                    <input class="txtBox" type="text" name="txtEmail" value=""
                                                           onblur="validEmail(this.value, 'errorMinLengEmail', 'errorMaxLengEmail', 'errorExistedEmail')"/>
                                                </td>
                                                
                                            </tr>
                                            <tr>
                                                <td style="width: 160px; font-weight: bold">
                                                    Sinh nhật:
                                                </td>
                                                <td>
                                                    <select class="dmy" name="ddlDay">
                                                        <option value="1">1</option>
                                                        <option value="2">2</option>
                                                        <option value="3">3</option>
                                                        <option value="4">4</option>
                                                        <option value="5">5</option>
                                                        <option value="6">6</option>
                                                        <option value="7">7</option>
                                                        <option value="8">8</option>
                                                        <option value="9">9</option>
                                                        <option value="10">10</option>
                                                        <option value="11">11</option>
                                                        <option value="12">12</option>
                                                        <option value="13">13</option>
                                                        <option value="14">14</option>
                                                        <option value="15">15</option>
                                                        <option value="16">16</option>
                                                        <option value="17">17</option>
                                                        <option value="18">18</option>
                                                        <option value="19">19</option>
                                                        <option value="20">20</option>
                                                        <option value="21">21</option>
                                                        <option value="22">22</option>
                                                        <option value="23">23</option>
                                                        <option value="24">24</option>
                                                        <option value="25">25</option>
                                                        <option value="26">26</option>
                                                        <option value="27">27</option>
                                                        <option value="28">28</option>
                                                        <option value="29">29</option>
                                                        <option value="30">30</option>
                                                        <option value="31">31</option>
                                                    </select>
                                                    <select class="dmy" name="ddlMonth">
                                                        <option value="1">Tháng 1</option>
                                                        <option value="2">Tháng 2</option>
                                                        <option value="3">Tháng 3</option>
                                                        <option value="4">Tháng 4</option>
                                                        <option value="5">Tháng 5</option>
                                                        <option value="6">Tháng 6</option>
                                                        <option value="7">Tháng 7</option>
                                                        <option value="8">Tháng 8</option>
                                                        <option value="9">Tháng 9</option>
                                                        <option value="10">Tháng 10</option>
                                                        <option value="11">Tháng 11</option>
                                                        <option value="12">Tháng 12</option>
                                                    </select>
                                                    <select class="dmy" name="ddlYear">
                                                        <option value="2013">2013</option>
                                                        <option value="2012">2012</option>
                                                        <option value="2011">2011</option>
                                                        <option value="2010">2010</option>
                                                        <option value="2009">2009</option>
                                                        <option value="2008">2008</option>
                                                        <option value="2007">2007</option>
                                                        <option value="2006">2006</option>
                                                        <option value="2005">2005</option>
                                                        <option value="2004">2004</option>
                                                        <option value="2003">2003</option>
                                                        <option value="2002">2002</option>
                                                        <option value="2001">2001</option>
                                                        <option value="2000">2000</option>
                                                        <option value="1999">1999</option>
                                                        <option value="1998">1998</option>
                                                        <option value="1997">1997</option>
                                                        <option value="1996">1996</option>
                                                        <option value="1995">1995</option>
                                                        <option value="1994">1994</option>
                                                        <option value="1993">1993</option>
                                                        <option value="1992">1992</option>
                                                        <option value="1991">1991</option>
                                                        <option value="1990">1990</option>
                                                        <option value="1989">1989</option>
                                                        <option value="1988">1988</option>
                                                        <option value="1987">1987</option>
                                                        <option value="1986">1986</option>
                                                        <option value="1985">1985</option>
                                                        <option value="1984">1984</option>
                                                        <option value="1983">1983</option>
                                                        <option value="1982">1982</option>
                                                        <option value="1981">1981</option>
                                                        <option value="1980">1980</option>
                                                    </select>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="width: 160px; font-weight: bold">
                                                    Giới tính:
                                                </td>
                                                <td>
                                                    <input type="radio" name="sex" value="nam" checked="checked" />
                                                    Nam
                                                    <input type="radio" name="sex" value="nu" />
                                                    Nữ
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="width: 160px; font-weight: bold">
                                                    Địa chỉ:
                                                </td>
                                                <td>
                                                    <div style="color: red;">
                                                        <span id="errorMinLengAdd" style="display: none">Vui lòng nhập địa chỉ</span>
                                                        <span id="errorMaxLengAdd" style="display: none">Địa chỉ quá dài</span>
                                                    </div>
                                                    <input class="txtBox" type="text"  name="txtAdd" value=""
                                                           onblur="validAdd(this.value, 'errorMinLengAdd', 'errorMaxLengAdd')"/>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="width: 160px; font-weight: bold">
                                                    Số điện thoại:
                                                </td>
                                                <td>
                                                    <div style="color: red;">
                                                        <span id="errorPhone" style="display: none">Số điện thoại không đúng</span>
                                                    </div>
                                                    <input class="txtBox" style="width: 200px" type="text" name="txtPhone" value=""
                                                           onblur="validPhone(this.value, 'errorPhone')"/>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td></td>
                                                <td>
                                                    <input class="btRegis"  type="submit" name="action" value="Đăng ký" />
                                                    <input class="btRegis" type="reset" value="Nhập lại" />
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </form>
                            </c:otherwise>
                        </c:choose>
                    </div>
                </div>
            </div>
        </div>
        <div class="foot-wrap">
            Assignment - Group Điền Nam Ngọc<br/>
            FPT - University
        </div>
    </body>
</html>
